<template>
	<view class="">
		<view style="background: #fff;margin-bottom: 20upx;">
			<view class="goods" @click="click">
				<view class="top webkit">
					<view class="flex">订单号：{{data.order_number}}</view>
					<text v-if="data.status == 1">待付款</text>
					<text v-if="data.status == 2">待发货</text>
					<text v-if="data.status == 3">已发货</text>
					<text v-if="data.status == 4">已完成</text>
					<text v-if="data.status == 5">已取消</text>
				</view>
				
				<view v-for="(item,i1) in data.goodsInfo" :key="i1">
					<view class="center webkit">
						<image :src="item.goods_thumb_image" mode=""></image>
						<view class="flex ellipsis-2" style="height: 96upx;line-height: 48upx;">{{item.goods_name}}</view>
						<view>
							<text>原价￥{{item.cost_price}}</text>
							<text style="color: #999;">x{{item.number}}</text>
						</view>
					</view>
				</view>
				<!-- 拼团商品没有goodsInfo -->
				<view v-if="!data.goodsInfo">
					<view class="center webkit">
						<image :src="data.goods_thumb" mode=""></image>
						<view class="flex ellipsis-2" style="height: 96upx;line-height: 48upx;">{{data.goods_name}}</view>
						<view>
							<text style="color: #999;">x{{data.number}}</text>
						</view>
					</view>
				</view>
				
				
				<view class="bottom">
					 实付款: <text> {{data.price}}</text>
				</view>
			</view>
			<view class="status webkit">
				<view class="flex"></view>
				<!-- <button type="default" v-if='data.status == -1 || data.status == 3' style="line-height: 52upx;" plain="true" @click.stop="del">删除订单</button> -->
				<!-- <button type="primary" v-if='data.status == 1' style="background: #ededed;color: #333;" @click.stop="cancel">取消订单</button> -->
				<button type="primary" style="background-color: #000000;border-radius: 0;" v-if='data.status == 1' @click.stop="pay">现在付款</button>
				<!-- <button type="primary" v-if='data.status == 3&&data.iscomment == 0' @click.stop="evaluate">评价</button>
				<button type="primary" v-if='data.status == 3 || data.status == 2' @click.stop="log">查看物流</button>
				<button type="primary" v-if='data.status == 2' @click.stop="confirm">确认收货</button> -->
			</view>
		</view>
		 
	</view>
</template>
<script>
    export default {
        props: {
            data: {
                type: Object,
                default: function(e) {
                    return {}
                }
            },
        },
        computed: {
            isImgRight() {
                return this.data.article_type === 2
            },
            isImgLeft() {
                return this.data.article_type === 1
            },
            showImg() {
                return this.data.image_list || this.data.image_url
            }
        },
        methods: {
            cancel(e) {
                this.$emit('cancel');
            },
            click(e) {
                this.$emit('click');
            },
            log(e) {
                this.$emit('log');
            },
            evaluate(e) {
                this.$emit('evaluate');
            },
            del(e) {
                this.$emit('del');
            },
            pay(e) {
                this.$emit('pay');
            },
						confirm(e){
							this.$emit('confirm')
						},
            bindClick() {
                this.$emit('click');
            }
        }
    }
</script>

<style>
	.goods{
		padding-bottom: 10upx;
		border-bottom: 1px solid #f0f0f0;
	}
	.goods .top{
		padding: 16upx 20upx;
		border-bottom: 1px solid #f0f0f0;
		margin-bottom: 10upx;
	}
	.goods .top .flex{
		font-size: 26upx;}
	.goods .top text{
		color: #666;
		font-size: 26upx;
	}
	.goods .center{
		    padding: 16upx 30upx;
	}
	.goods .center image{
		width: 160upx;
		height: 160upx;
		margin-right: 20upx;
	}
	.goods .center view{}
	.goods .center .flex{
		margin-right: 20upx;
	}
	.goods .center text{
		display: block;
		text-align: right;
		font-size: 26upx;
	}
	.goods .bottom{
		font-size: 24upx;
		text-align: right;
		padding: 10upx 30upx;
	}
	.goods .bottom text{
		font-size: 26upx;
		color: #f55;
	}
	.status{
		padding: 20upx;
	}
	.status button{
		height: 56upx;
		font-size: 24upx;
		line-height: 56upx;
		margin: 0;
		margin-left: 20upx;
		border-radius: 56upx;
	}
	.status button:after{
		display: none;
	}
</style>
